/**
* Created by wust on 2020/3/27.
*/
<template>
  <div id="function-tree-account">
    <el-row style="text-align: left;">
      <el-button-group style="margin-bottom: 2px;margin-left: 5px;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="onSubmit()">保存</el-button>
        <label style="color: red;font-size: small;margin-left: 8px;margin-top: 4px;">当前账号：{{this.selectedModel.accountCode}}</label>
      </el-button-group>
    </el-row>
    <div>
      <el-tabs  v-model="editableTabsValue" type="border-card">
        <el-tab-pane label="资源树" name="AgentTree" style="min-height: 530px">
          <ul id="ztree" class="ztree"></ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import '../../../static/zTree_v3.5.27/js/jquery.ztree.core.js'
import '../../../static/zTree_v3.5.27/js/jquery.ztree.excheck.js'
import '../../../static/zTree_v3.5.27/js/jquery.ztree.exedit.js'

export default {
  name: 'function-tree-account',
  components: {
  },
  props: ['selectedModel'],
  data () {
    return {
      setting: {
        view: {
          showLine: true
        },
        check: {
          enable: true,
          chkboxType: {'Y': 'ps', 'N': 's'}

        },
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          beforeClick: (treeId, treeNode, clickFlag) => {

          }
        }
      },
      editableTabsValue: 'AgentTree'
    }
  },
  created: function () {
    this.initData()
  },
  methods: {
    initData: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$adminServerURL + '/web/v1/AccountController/buildFunctionTreeByAccountId?accountId=' + this.selectedModel.id
      }).then(res => {
        if (res.data.flag === 'SUCCESS') {
          let zNodes = JSON.parse(res.data.obj)
          // eslint-disable-next-line no-undef
          $.fn.zTree.init($('#ztree'), this.setting, zNodes)
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    onSubmit: function () {
      // eslint-disable-next-line no-undef
      let treeObj = $.fn.zTree.getZTreeObj('ztree')
      let nodes = treeObj.getCheckedNodes(true)
      if (nodes == null || nodes.length === 0) {
        this.$message({
          message: '请选择功能权限数据',
          type: 'warning'
        })
        return
      }

      let data = {accountId: this.selectedModel.id, accountResources: []}
      let accountResources = []
      if (nodes != null && nodes.length > 0) {
        for (let i = 0; i < nodes.length; i++) {
          let rr = {resourceCode: nodes[i]['id'], type: nodes[i]['type']}
          accountResources[i] = rr
        }

        data.accountResources = accountResources


        const loading = this.$loading({
          lock: true,
          text: '正在提交...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        Vue.$ajax({
          method: 'post',
          url: Vue.$adminServerURL + '/web/v1/AccountController/setFunctionPermissions',
          data: data
        }).then(res => {
          if (res.data.flag === 'SUCCESS') {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
          loading.close()
        })
      }
    }
  }
}
</script>
<style>
  @import '../../../static/zTree_v3.5.27/css/zTreeStyle.css';
</style>
